<div class="alert" data-bind="visible: octoprintUnconfigured()">{% trans %}
    Please configure the <strong>checkout folder</strong> of OctoPrint, otherwise
    this plugin won't be able to update it. Click on the <i class="icon-wrench"></i> button
    to do this. Also refer to the <a href="https://github.com/foosel/OctoPrint/wiki/Plugin:-Software-Update" target="_blank">Documentation</a>.
{% endtrans %}</div>
<div class="alert" data-bind="visible: !octoprintUnconfigured() && octoprintUnreleased()">{% trans %}
    <p>
        <strong>You are running a non-release version of OctoPrint but are tracking OctoPrint
        releases.</strong>
    </p><p>
        You probably want OctoPrint to track the matching development version instead.
        If you have a local OctoPrint checkout folder switched to another branch,
        <strong>simply switching over to "Commit" tracking</strong> will already
        take care of that. Otherwise please take a look at the
        <a href="https://github.com/foosel/OctoPrint/wiki/Plugin:-Software-Update" target="_blank">Documentation</a>.
    </p>
{% endtrans %}</div>

<div class="pull-right">
    <button class="btn btn-small" data-bind="click: function() { $root.showPluginSettings(); }" title="{{ _('Plugin Configuration') }}"><i class="icon-wrench"></i></button>
</div>

<h3>{{ _('Current versions') }}</h3>

<table class="table table-striped table-hover table-condensed table-hover">
    <tbody data-bind="foreach: versions.paginatedItems">
    <tr data-bind="attr: {title: displayName}">
        <td class="settings_plugin_softwareupdate_column_update">
            <span data-bind="invisible: !updateAvailable"><i class="icon-bell" title="{{ _('Update available') }}"></i></span>
        </td>
        <td class="settings_plugin_softwareupdate_column_information">
            <strong data-bind="text: displayName"></strong>: <span data-bind="text: displayVersion"></span> <span data-bind="invisible: updatePossible"><i class="icon-exclamation-sign" title="{{ _('Update not possible, configuration ok?') }}"></i></span><br>
            <small class="muted">
                {{ _('Installed:') }} <span data-bind="text: information.local.name"></span><br>
                {{ _('Available:') }} <span data-bind="text: information.remote.name"></span><br>
                <span data-bind="visible: releaseNotes">{{ _('Release Notes:') }} <a data-bind="attr: {href: releaseNotes}, text: releaseNotes" target="_blank"></a></span>
            </small>
        </td>
    </tr>
    </tbody>
</table>
<div class="pagination pagination-mini pagination-centered">
    <ul>
        <li data-bind="css: {disabled: versions.currentPage() === 0}">
            <a href="#" data-bind="click: versions.prevPage">«</a>
        </li>
    </ul>
    <ul data-bind="foreach: versions.pages">
        <li data-bind="css: { active: $data.number === $root.versions.currentPage(), disabled: $data.number === -1 }">
            <a href="#" data-bind="text: $data.text, click: function() { $root.versions.changePage($data.number); }"></a>
        </li>
    </ul>
    <ul>
        <li data-bind="css: {disabled: versions.currentPage() === versions.lastPage()}">
            <a href="#" data-bind="click: versions.nextPage">»</a>
        </li>
    </ul>
</div>

<button class="btn btn-primary btn-block" data-bind="click: function() { $root.performCheck(true, false, true); }">{{ _('Check for update now') }}</button>

<div>
    <div><small><a href="#" class="muted" onclick="$(this).children().toggleClass('icon-caret-right icon-caret-down').parent().parent().parent().next().slideToggle('fast')"><i class="icon-caret-right"></i> {{ _('Advanced options') }}</a></small></div>
    <div class="hide">
        <button class="btn btn-block" data-bind="click: function() { $root.performCheck(true, true, true); }">{{ _('Force check for update (overrides cache used for update checks)') }}</button>
        <button class="btn btn-block btn-danger" data-bind="visible: CONFIG_DEBUG, click: function() { $root.update(true); }">{{ _('Force update now (even if no new versions are available)') }}</button>
    </div>
</div>

<div id="settings_plugin_softwareupdate_configurationdialog" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
        <h3>{{ _('Plugin Configuration') }}</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label">{{ _('OctoPrint checkout folder') }}</label>
                <div class="controls">
                    <input type="text" class="input-block-level" data-bind="value: config_checkoutFolder">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{ _('OctoPrint version tracking') }}</label>
                <div class="controls">
                    <select data-bind="value: config_checkType, options: config_availableCheckTypes, optionsText: 'name', optionsValue: 'key'"></select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{ _('Version cache TTL') }}</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="number" class="input-mini" data-bind="value: config_cacheTtl">
                        <span class="add-on">min</span>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</button>
        <button class="btn btn-primary" data-bind="click: savePluginSettings" aria-hidden="true">{{ _('Save') }}</button>
    </div>
</div>

